<template>
	<gui-page ref="guiPage" :customFooter="true">

	
		<!-- 页面主体 -->
		<template v-slot:gBody>
			<view>
				
				
				<scroll-view :scroll-y="true">
					<home v-if="currentIndex==0"></home>
					<shop v-if="currentIndex==1"></shop>
					<chat v-show="currentIndex==3"></chat>
					<user v-if="currentIndex==4"></user>
				</scroll-view>
				
				<!-- <swiper disable-touch="true" touchable="false" :current="currentIndex" @change="(e)=>{ currentIndex = e.detail.current }">
				
					<swiper-item>
						
						<scroll-view :scroll-y="true">
							<home></home>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						
						<scroll-view :scroll-y="true">
							<shop></shop>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						
						
					</swiper-item>
					<swiper-item>
						
						<scroll-view :scroll-y="true">
							<chat></chat>
						</scroll-view>
					</swiper-item>
					<swiper-item>
					
						<scroll-view :scroll-y="true">
							<user></user>
						</scroll-view>
					</swiper-item>
				</swiper> -->


			</view>
		</template>
		<!-- 自定义底部导航 -->
		<template v-slot:gFooter>

			<view style="padding-top:50rpx;" class="gui-relative">
				<gui-flex :customClass="['gui-footer']" direction="row" :wrap="false" alignItems="center">
					<view class="gui-footer-icon-buttons" @tap="navChange(0)">
						<text :class="[
							currentIndex == 0 ? 'gui-color-orange' : 'gui-color-gray', 
							'gui-icons', 
							'gui-footer-icon-buttons-icon', 
							'gui-block'
						]">&#xe63b;</text>
						<text :class="[
							currentIndex == 0 ? 'gui-color-orange' : 'gui-color-gray', 
							'gui-icons', 
							'gui-footer-icon-buttons-text', 
							'gui-block'
						]">首页</text>
					</view>
					<view class="gui-footer-icon-buttons" @tap="navChange(1)">
						<text :class="[
							currentIndex == 1 ? 'gui-color-orange' : 'gui-color-gray', 
							'gui-icons', 
							'gui-footer-icon-buttons-icon', 
							'gui-block'
						]">&#xe60a;</text>
						<text :class="[
							currentIndex == 1 ? 'gui-color-orange' : 'gui-color-gray', 
							'gui-icons', 
							'gui-footer-icon-buttons-text', 
							'gui-block'
						]">商家</text>
					</view>

					<view class="gui-footer-icon-buttons"></view>

					<view class="gui-footer-icon-buttons" @tap="navChange(3)">
						<text :class="[
							currentIndex == 3 ? 'gui-color-orange' : 'gui-color-gray', 
							'gui-icons', 
							'gui-footer-icon-buttons-icon', 
							'gui-block'
						]">&#xe666;</text>
						<text :class="[
							currentIndex == 3 ? 'gui-color-orange' : 'gui-color-gray', 
							'gui-icons', 
							'gui-footer-icon-buttons-text', 
							'gui-block'
						]">消息</text>
					</view>
					<view class="gui-footer-icon-buttons" @tap="navChange(4)">
						<text :class="[
							currentIndex == 4 ? 'gui-color-orange' : 'gui-color-gray', 
							'gui-icons', 
							'gui-footer-icon-buttons-icon', 
							'gui-block'
						]">&#xe6fe;</text>
						<text :class="[
							currentIndex == 4 ? 'gui-color-orange' : 'gui-color-gray', 
							'gui-icons', 
							'gui-footer-icon-buttons-text', 
							'gui-block'
						]">我的</text>
					</view>
				</gui-flex>
				<!-- 使用定位方式实现凸出按钮 -->
				<view class="gui-footer-buttons-ab" @tap="navChange(2)">
					<text :class="[
						 'gui-color-orange', 
						'gui-footer', 
						'gui-icons', 
						'gui-footer-buttons-ab-icon', 
						'gui-block',
						'gui-dark-bg-level-2'
					]">&#xe625;</text>
					<text :class="[
						'gui-color-orange', 
						'gui-icons', 
						'gui-footer-icon-buttons-text', 
						'gui-block'
					]">发布</text>
				</view>


			</view>

		</template>
	</gui-page>
	<gui-popup ref="guipopup3" position="bottom">
		<view>
			<view class="gui-relative gui-padding" @click="$refs.guipopup3.close()">

				<view class="gui-bg-white gui-padding gui-border-radius gui-h6"
					style=" width: 400rpx;margin: 0 auto;margin-bottom: 200rpx;">
					<view class="gui-padding gui-color-red gui-text-center gui-icons" @click="qiugou"> &#xe736; 求购信息</view>
					<view class="gui-padding  gui-text-center  gui-icons" @click="productpub">&#xe606; 商机发布</view>
					<view class="gui-padding  gui-text-center  gui-icons" @click="shopadd">&#xe608; 店铺入驻</view>
				</view>

			</view>

		</view>
	</gui-popup>


</template>
<script>
	import user from '@/pages/switchPages/user'
	import home from '@/pages/switchPages/home'
	import shop from '@/pages/switchPages/shop'
	import news from '@/pages/switchPages/news'
	import chat from '@/pages/switchPages/chat'
	export default {
		components: {
			home,
			user,
			shop,
			news,
			chat
		},
		data() {
			return {
				currentIndex: 0,
				showIndex: 1
			}
		},
		onShow() {
			
			
			
		},
		methods: {
			navChange: function(index) {

				if (index == 2) {
					this.showMenu();
					return;
				}

				this.currentIndex = index;
			},
			showChange: function(idx) {
				this.showIndex = idx;
				// 切换时候重新计算一下自定义的底部高度
				// 实际开发过程中底部导航是固定模式的不需要重新计算
				this.$refs.guiPage.resetFooterHeight();
			},
			showMenu() {
				this.$refs.guipopup3.open();
			},
			shopadd(){
				uni.navigateTo({
					url:'/pages/shop/add'
				})
			},
			qiugou(){
				uni.navigateTo({
					url:'/pages/qiugou/add'
				})
			},
			productpub(){
				uni.navigateTo({
					url:'/pages/product/add'
				})
			}
		}
	}
</script>
<style scoped>
	swiper {
		height: calc(100vh - 150rpx);
	}

	scroll-view {
		height: 100%;
	}

	menus {
		line-height: 88rpx;
		font-size: 28rpx;
		margin-left: 30rpx;
		text-align: left;
	}
</style>